<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sokoban</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style>
		* {padding: 0;margin: 0;border: 0}
		html, body {min-height: 100%;}
		body {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.sokoban-container {
			margin: 20px auto;
			text-align: center;
		}
		.sokoban-container .sokoban-row {
			overflow: hidden;
		}
		.sokoban-container .sokoban-row .sokoban-item{
			float: left;
			width: 20px;
			height: 20px;
			background: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.sokoban-container .sokoban-row .sokoban-item.item-1:before{ content: ''; display: block; width: 80%;height: 80%; border: 3px solid; border-radius: 50% }
		.sokoban-container .sokoban-row .sokoban-item.item-2:before{ content: ''; display: block; width: 80%;height: 80%; border: 3px solid; }
		.sokoban-container .sokoban-row .sokoban-item.item-3{ background: gray }
		.sokoban-container .sokoban-row .sokoban-item.item-3:before{ content: ''; display: block; width: 80%;height: 80%; border: 3px solid; background: firebrick }
		.sokoban-container .sokoban-row .sokoban-item.item-7{ background: gray }
		.sokoban-container .sokoban-row .sokoban-item.item-7:before{ content: ''; display: block; width: 80%;height: 80%; border: 3px solid; border-radius: 50% }
		.sokoban-container .sokoban-row .sokoban-item.item-8{ background: gray }
		.sokoban-container .sokoban-row .sokoban-item.item-9{ background: black }
		.control-container {
			width: 180px;
			height: 180px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.control-container .control-row{
			flex-grow: 1;
			display: flex;
			justify-content: center;
			height: 60px;
			width: 180px;
		}
		.control-container .control-row.center{
			justify-content: space-between;
		}
		.control-container .control-row .control-item {
			width: 60px;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 36px;
			background: black;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="sokoban-container">

	</div>
	<div class="control-container">
		<div class="control-row">
			<div class="control-item" id="up">
				上
			</div>
		</div>
		<div class="control-row center">
			<div class="control-item" id="left">
				左
			</div>
			<div class="control-item" id="right">
				右
			</div>
		</div>
		<div class="control-row" id="down">
			<div class="control-item">
				下
			</div>
		</div>

	</div>
	<script src="index.js"></script>
</body>
</html>